<template>
  <div :class="['bbx-tabs__nav-wrap', needScroll && 'is-scroll']">
    <template v-if="needScroll">
      <div class="bbx-tabs__nav-scroll-arrow is-left" @click="handleDirectionScroll('left')">
        <i class="iconfont icon-left1"></i>
      </div>
      <div class="bbx-tabs__nav-scroll-arrow is-right" @click="handleDirectionScroll('right')">
        <i class="iconfont icon-right1"></i>
      </div>
    </template>
    <div ref="scrollRef" class="bbx-tabs__nav-scroll">
      <div class="bbx-tabs__nav">
        <div
          v-for="item of tabs" 
          :key="item[objectKey]"
          :class="['bbx-tabs__nav-item', value === (item[objectKey] || item) && 'is-active']"
          @click="handleChoose(item)"
        >
          <span>{{ item[label] || item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, watch, nextTick } from 'vue';
import { useSmoothScroll } from 'pub-bbx-utils'

export default defineComponent({
  name: 'BbxTabs',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      default: ''
    },
    objectKey: {
      type: String,
      default: 'value'
    },
    label: {
      type: String,
      default: 'label'
    },
  },
  emits: ['update:modelValue', 'choose'],
  setup(props, { emit }) {
    const { scrollRef, needScroll, isOverflow, scrollTo, handleDirectionScroll } = useSmoothScroll('horizontal')

    async function scrollToActive(){
      if(!scrollRef.value)	return
      await nextTick()
      const activeTab = scrollRef.value.querySelector('.is-active')
      if(activeTab){
        scrollTo(activeTab.offsetLeft + (activeTab.offsetWidth / 2) - (scrollRef.value.offsetWidth / 2))
      }
    }

    function handleChoose(item){
      scrollToActive()
      emit('choose', item)
      emit('update:modelValue', item?.[props.objectKey] ?? item)
    }

    watch(props.tabs, (val) => {
      // 监听元素变化，重新计算是否需要滚动
      nextTick(() => {
        isOverflow()
      })
    })


    return {
      scrollRef,
      needScroll,
      handleChoose,
      handleDirectionScroll,
    }
  }
})
</script>

<style lang="scss">
.bbx-tabs__nav-wrap {
  --bbx-tabs-nav-height: 40px;
  position: relative;
  width: 100%;
  height: var(--bbx-tabs-nav-height);
  &.is-scroll {
    padding: 0 var(--bbx-tabs-nav-height);
  }
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: $border-color-light;
    z-index: 10;
  }
  .bbx-tabs__nav-scroll-arrow {
    width: var(--bbx-tabs-nav-height);
    height: var(--bbx-tabs-nav-height);
    line-height: var(--bbx-tabs-nav-height);
    text-align: center;
    position: absolute;
    top: 0;
    z-index: 20;
    cursor: pointer;
    &:hover i {
      color: $color-primary;
      font-weight: bold;
    }
    &.is-disabled {
      color: #ccc;
      cursor: not-allowed;
    }
    &.is-left {
      left: 0;
    }
    &.is-right {
      right: 0;
    }
  }
  .bbx-tabs__nav-scroll {
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }

    .bbx-tabs__nav {
      .bbx-tabs__nav-item {
        padding: 0 20px;
        height: var(--bbx-tabs-nav-height);
        line-height: var(--bbx-tabs-nav-height);
        box-sizing: border-box;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        position: relative;
        cursor: pointer;
        &.is-active {
          color: $color-primary;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: $color-primary;
            z-index: 20;
          }
        }
        span {
          max-width: 160px;
          @include text-ellipsis;
          display: inline-block;
        }
      }
    }
  }
}
</style>
